<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    ### 浏览器卷去的尺寸

        #### 卷去的高度
        + 语法:
        + `document.documentElement.scrollTop`
            + 当 html 页面有 DOCTYPE 标签的时候能获取到尺寸

        + `document.body.scrollTop`
            + 当 html 页面没有 DOCTYPE 标签的时候能获取到尺寸

        + 兼容:
            + 利用 或(||) 运算符进行兼容
            + `var scrollTop = document.documentElement.scrollTop || document.body.scrollTop`


        #### 卷去的宽度
        + 语法:
        + `document.documentElement.scrollLeft`
            + 当 html 页面有 DOCTYPE 标签的时候能获取到尺寸
        + `document.body.scrollLeft`
            + 当 html 页面没有 DOCTYPE 标签的时候能获取到尺寸
        + 兼容:
            - `var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft`

    <button id="btn" style="position: fixed;right: 10px;bottom: 20px;">
        按钮
    </button>
    <p style="background-color: yellow;width: 3000px;text-align: center;position: absolute;top: 1400px;">
        文字
    </p>
    <script>
        // 1.浏览器卷去的尺寸
        // scroll 滚动
        // scrollTop:纵向滚动
        // scrollLeft:横向滚动
        console.log(document.documentElement.scrollTop); 
        console.log(document.documentElement.scrollLeft); 
    </script>

    <!-- 浏览器滚动条回到顶部,设置卷去的尺寸为0 -->
    <script>
        // document.onclick=function(){
        //     document.documentElement.scrollTop=0
        //     document.documentElement.scrollLeft=0
        // }
    </script>

    2. ### 浏览器滚动到
    - 浏览器滚动到
    - 专门用来进行浏览器滚动条定位(定位卷去的尺寸)

    - 语法: `window.scrollTo()`
    - 参数方案1: 传递数字
        - 语法: `window.scrollTo(x, y)`
        - x 表示横向卷去的尺寸
        - y 表示纵向卷去的尺寸
        - 注意: 必须传递两个数字, 一个报错
        - 注意: 只能进行瞬间定位

    - 参数方案2: 传递对象
        - 语法: `window.scrollTo({ left: yyy, top: xxx })`
        - 可以选择一个方向填写
        - 对象内可以填写 `behavior` 属性, 值填写 `'smooth'` 属性来表示平滑滚动
    <script>
        btn.onclick=function(){
            // window.scrollTo(0,0);
            // window.scrollTo(1500,1500);

            window.scrollTo({top:0,left:0,behavior:'smooth'})
        }

    </script>

    </body>
</html>